<template>
    <div style="" class="headers">
        <div class="container">
            <div class="header flex align-items" style="justify-content: space-between;">
                <div class="left flex align-items">
                    <img class="img" src="../assets/img/1.png" alt="" />
                    <div class="title">xxx消防设备网站</div>
                </div>
                <div class="right flex align-items">
                    <el-button class="header-custom-btn"
                        @click="$store.dispatch('showReportModal', true)">一键举报</el-button>
                    <el-button class="header-custom-btn">供应商入驻</el-button>
                    <el-button class="header-custom-btn">供应商后台</el-button>
                    <el-button class="header-custom-btn">运维后台</el-button>

                    <login-menu :transparent="true" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import loginMenu from '@/components/login-menu'
export default {
    components: {
        loginMenu
    },
    data () {
        return {

        }
    },
    computed: {
    },
    methods: {

    },
}
</script>

<style scoped lang="less">
.img {
    height: 60px;
    width: 60px;
}

.title {
    font-weight: normal;
    font-size: 24px;
    color: #ffffff;
}


.headers {
    background: rgba(255, 255, 255, 0.1);
}



.header-custom-btn {
    color: #fff;
    font-size: 1rem;
    border-color: transparent;
    background-color: transparent;

    a {
        color: initial;
        text-decoration: none;
    }

    &:focus,
    &:hover {
        background: #EF312A;
        border-color: #EF312A;
        color: #FFF;

        a {
            color: #FFF;
        }
    }
}
</style>